<template>
	<div class="month-box">
		<div class="month-item" :class="'class' + item.maintenanceLevelId" v-for="(item, index) of ruleMonths" :key="index">
			<div class="month-title">
				<span>{{ item.monthName }}</span>
				<i @click="delOneMonth(index)" v-if="item.maintenanceLevelId && !disabled" class="el-icon-close"></i>
			</div>
			<div class="math-cont" v-if="item.maintenanceLevelId">
				<el-form-item label="级别:" size="small">
					<el-select size="mini" v-model="item.maintenanceLevelId" placeholder="请选择" @change="changeLevel(item)" :disabled="disabled">
						<el-option v-for="dict in dict.type.maintain_level" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="保养人:" size="small">
					<el-select size="mini" v-model="item.maintenanceUserId" placeholder="" @change="changeUser(item)" :disabled="disabled">
						<el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
					</el-select>
				</el-form-item>
			</div>
			<div class="math-cont2" v-else>
				<el-button size="mini" type="primary" v-if="!disabled" @click="setMaintain(index)">设置保养</el-button>
			</div>
		</div>
	</div>
</template>
<script>
import { getworkerList1 } from "@/api/selectList"
export default {
	name: "MonthLevel",
	dicts: ["maintain_level"],
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		ruleMonths: {
			type: Array,
			required: true,
			default: []
		}
	},
	data() {
		return {
			form: {},
			userList: []
		}
	},
	methods: {
		// 删除月份一项
		delOneMonth(index) {
			this.ruleMonths[index].maintenanceLevelId = undefined
			this.ruleMonths[index].maintenanceUserId = undefined
			this.ruleMonths[index].maintenanceLevel = undefined
			this.ruleMonths[index].maintenanceUser = undefined
		},
		// 设置计划
		setMaintain(index) {
			this.ruleMonths[index].maintenanceLevelId = this.dict.type.maintain_level[0].value
			this.ruleMonths[index].maintenanceLevel = this.dict.type.maintain_level[0].label
		},
		// 获取用户下拉列表
		async getUserList() {
			let ret = await getworkerList1()
			this.userList = ret.rows
		},
		// 更改等级
		changeLevel(item) {
			let cur = this.dict.type.maintain_level.find(ele => {
				return ele.value == item.maintenanceLevelId
			})
			item.maintenanceLevel = cur.label
		},
		// 更改用户
		changeUser(item) {
			let cur = this.userList.find(ele => {
				return ele.userId == item.maintenanceUserId
			})
			item.maintenanceUser = cur.nickName
		}
	},
	created() {
		this.getUserList()
	}
}
</script>

<style lang="scss" scoped>
.month-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	min-height: 451px;
	flex-wrap: wrap;
	box-sizing: border-box;

	.month-item {
		width: 200px;
		height: 150px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		display: flex;
		flex-wrap: wrap;
		border-radius: 8px;
		margin-bottom: 10px;
		overflow: hidden;
	}
	.el-form-item--small.el-form-item {
		margin-bottom: 0px;
	}
	.month-title {
		height: 34px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		// color: #fff;
		padding: 0 10px;
		position: relative;
		// background: #4cc8d6;
		border-bottom: 1px solid #dcdcdc;
		.el-icon-close {
			position: absolute;
			right: 16px;
		}
	}
	.math-cont {
		height: 114px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
		color: #00ffff;
	}
	.math-cont2 {
		height: 116px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		//background: #e0fbfe;
	}
	::v-deep .el-form-item__label {
		text-align: left;
		width: 60px !important;
	}
	::v-deep .el-form-item__content {
		margin-left: 60px !important;
	}
	// 根据级别更改颜色
	.class1 {
		.month-title {
			background: #ffefeb;
		}
		.math-cont {
			background: #ffefeb;
		}
		::v-deep .el-input__inner {
			background: #ffefeb;
		}
		::v-deep .el-form-item__label,
		::v-deep .el-input__inner {
			color: #c48777;
		}
	}
	.class2 {
		.month-title {
			background: #fffaee;
		}
		.math-cont {
			background: #fffaee;
		}
		::v-deep .el-input__inner {
			background: #fffaee;
		}
		::v-deep .el-form-item__label,
		::v-deep .el-input__inner {
			color: #f19149;
		}
	}
	.class3 {
		.month-title {
			background: #effff2;
		}
		.math-cont {
			background: #effff2;
		}
		::v-deep .el-input__inner {
			background: #effff2;
		}
		::v-deep .el-form-item__label,
		::v-deep .el-input__inner {
			color: #6ca777;
		}
	}
}
</style>
